<!-- eslint-disable max-len -->
<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme">
    <module-header name="app" value="/doctor" is-telescreen />

    <main-content>
      <div class="content-wrapper flex justify-center flex-wrap flex-row">
        <div class="flex flex-col items-center">
          <div class="text-white text-2xl">报到</div>
          <div class="fctCard" @click="shrinkBack(0)">
            <div class="svg">
              <svg id="svg-digital-tool" width="180" height="180" viewBox="0 0 200 200">
                <g id="svg-digital-tool-g-01">
                  <circle class="cls-1" cx="97" cy="124.65" r="14.78" />
                  <rect class="cls-2" x="72.58" y="42.67" width="46.13" height="86.49" rx="5.77" ry="5.77" />
                  <rect class="cls-3" x="92.77" y="47.71" width="5.77" height="1.44" />
                  <circle class="cls-3" cx="95.65" cy="123.39" r="2.9" />
                  <rect class="cls-1" x="95.65" y="130.02" width="31.71" height="26.15" />
                  <rect class="cls-4" x="75.47" y="54.2" width="40.36" height="63.43" />
                </g>
                <g id="svg-digital-tool-g-02">
                  <rect class="cls-5" x="90" y="90" width="15" height="15" rx="2" ry="2" />
                </g>
                <g id="svg-digital-tool-g-03">
                  <rect class="cls-5" x="78.21" y="76.21" width="10" height="10" rx="2" ry="2" />
                  <rect class="cls-5" x="90.74" y="76.21" width="10" height="10" rx="2" ry="2" />
                  <rect class="cls-5" x="78.21" y="60.99" width="10" height="10" rx="2" ry="2" />
                  <rect class="cls-5" x="90.74" y="60.99" width="10" height="10" rx="2" ry="2" />
                  <rect class="cls-5" x="103.27" y="60.99" width="10" height="10" rx="2" ry="2" />
                  <rect class="cls-5" x="103.27" y="76.21" width="10" height="10" rx="2" ry="2" />
                </g>
                <g id="svg-digital-tool-g-04">
                  <path class="cls-1"
                        d="M121.6,118.34a5.76,5.76,0,0,0,5.77-5.77V112.3c0-3.65,0-13.36,3.8-19.39a5.77,5.77,0,0,0-9.76-6.15c-5.58,8.86-5.58,20.55-5.57,25.55v0.27A5.77,5.77,0,0,0,121.6,118.34Z"
                  />
                </g>
                <g id="svg-digital-tool-g-05">
                  <circle class="cls-1" cx="72.58" cy="94.42" r="5.77" />
                  <circle class="cls-1" cx="72.58" cy="82.76" r="5.77" />
                  <circle class="cls-1" cx="72.58" cy="105.96" r="5.77" />
                  <path class="cls-1" d="M127.36,106.09v23.06H104.3A23.06,23.06,0,0,1,127.36,106.09Z" />
                  <circle class="cls-1" cx="115.83" cy="129.16" r="11.53" />
                  <circle class="cls-1" cx="72.58" cy="117.49" r="5.77" />
                </g>
              </svg>
            </div>
          </div>
        </div>
        <div class="flex flex-col items-center">
          <div class="text-white text-2xl">开启新的项目</div>
          <div class="fctCard" @click="shrinkBack(1)">
            <div class="svg">
              <svg id="svg-product-information" width="180" height="180" viewBox="0 0 200 200">
                <title>Product Information</title>
                <g id="svg-product-information-g-01">
                  <rect class="cls-1" x="75.65" y="130.39" width="11.62" height="17.78" />
                  <path class="cls-2"
                        d="M90.72,104.53H72.52a1.89,1.89,0,0,0-2.1,1.54v1.72a1.89,1.89,0,0,0,2.1,1.54h18.2a1.89,1.89,0,0,0,2.1-1.54v-1.72A1.89,1.89,0,0,0,90.72,104.53Z"
                  />
                  <rect class="cls-2" x="80.02" y="96.34" width="3.2" height="12.8" />
                  <path class="cls-2" d="M86.07,93H77.17a2.42,2.42,0,1,0,0,4.8h8.89A2.42,2.42,0,1,0,86.07,93Z" />
                  <path class="cls-2"
                        d="M81.91,149.89H81.18a0.83,0.83,0,0,0-.59,1V162a1,1,0,0,0,2,0V150.84A0.83,0.83,0,0,0,81.91,149.89Z"
                  />
                  <path class="cls-2" d="M85.41,109.53v37.21h-8V109.53h8m3.2-3.2H74.21v43.61h14.4V106.33h0Z" />
                  <rect class="cls-2" x="81.24" y="118.4" width="6.4" height="1.6" />
                  <rect class="cls-2" x="81.24" y="125.05" width="6.4" height="1.6" />
                  <rect class="cls-2" x="81.24" y="133.05" width="6.4" height="1.6" />
                  <rect class="cls-2" x="77.72" y="146.86" width="8" height="8" />
                  <path class="cls-2"
                        d="M116,93.59a28.93,28.93,0,0,0-6.68.39,14.1,14.1,0,0,0-8.14,5.45c-2.34,3.22-2.76,6.79-2.75,10.61v16.6h3.07c0-6.54-.3-13.15,0-19.68a11.16,11.16,0,0,1,4.93-8.41c2.45-1.68,5.15-1.88,8-1.88a13.35,13.35,0,0,1,8,2.1,11.16,11.16,0,0,1,4.63,8.6c0.32,6.39,0,12.86,0,19.26h3.07V113.19a50.78,50.78,0,0,0-.17-7.48A14.4,14.4,0,0,0,116,93.59Z"
                  />
                  <path class="cls-3"
                        d="M98.42,146.82c0,4.85,1.83,9.38,5.84,12.31a14.53,14.53,0,0,0,8.65,2.76,24,24,0,0,0,7.58-.73,14.41,14.41,0,0,0,9.73-13.48V128.58H98.42v18.23Z"
                  />
                </g>
                <g id="svg-product-information-g-02">
                  <ellipse class="cls-4" cx="100.42" cy="59.82" rx="40" ry="24" />
                  <polygon class="cls-4" points="95.16 79.32 107.17 79.32 100.42 90.89 95.16 79.32" />
                  <ellipse class="cls-6" cx="100.34" cy="53.19" rx="50" ry="31.2" />
                  <polygon class="cls-6" points="93.51 78.53 109.12 78.53 100.34 93.57 93.51 78.53" />
                </g>
                <g id="svg-product-information-g-02" class="cls-5">
                  <text id="svg_1" fill="#ffffff" stroke="#000" stroke-width="0" x="64.99998" y="60.99998" font-size="24" font-family="Noto Sans JP"
                        text-anchor="start" xml:space="preserve" font-weight="bold"
                  >begin</text>
                </g>
              </svg>
            </div>
          </div>
        </div><div class="flex flex-col items-center">
          <div class="text-white text-2xl">新建流程</div>
          <div class="fctCard" @click="shrinkBack(2)">
            <div class="svg">
              <svg id="svg-guideline" width="160" height="160" viewBox="0 0 200 200">
                <g id="svg-guideline-g-01">
                  <path class="st0" d="M100.1,67.8c-21.9,0-39.7,17.8-39.7,39.7s17.8,39.7,39.7,39.7s39.7-17.8,39.7-39.7h-39.7" />
                  <path class="st1" d="M128.4,80.5h-16.1c-7.4,0-13.3-6-13.3-13.3c0-7.4,6-13.3,13.3-13.3h16.1" />
                  <circle class="st2" cx="128" cy="53.8" r="5" />
                  <circle class="st2" cx="128" cy="80.8" r="5" />
                  <ellipse transform="matrix(0.9993 -3.859485e-02 3.859485e-02 0.9993 -4.0725 4.0145)" class="st3" cx="101.9"
                           cy="107.5" rx="7.5" ry="7.5"
                  />
                  <ellipse transform="matrix(0.9993 -3.859485e-02 3.859485e-02 0.9993 -4.0725 4.0145)" class="st4" cx="101.9"
                           cy="107.5" rx="5" ry="5"
                  />
                </g>
                <g id="svg-guideline-g-02">
                  <path class="st5"
                        d="M104.1,107.5l-0.4-1.5h-0.2c-0.3,0.6-0.8,1-1.5,1.3c-0.6,0.3-1.4,0.5-2.2,0.5c-1.4,0-2.5-0.4-3.2-1.1 c-0.7-0.8-1.1-1.8-1.1-3.3v-7.8h3.3v7c0,0.9,0.2,1.5,0.5,2c0.3,0.4,0.8,0.6,1.5,0.6c0.9,0,1.6-0.3,2-0.9c0.4-0.6,0.6-1.6,0.6-3 v-5.6h3.3v12H104.1z"
                  />
                  <path class="st5"
                        d="M109.9,92.4c0-1.1,0.6-1.6,1.8-1.6s1.8,0.5,1.8,1.6c0,0.5-0.1,0.9-0.4,1.2c-0.3,0.3-0.7,0.4-1.3,0.4 C110.5,94,109.9,93.4,109.9,92.4z M113.3,107.5H110v-12h3.3V107.5z"
                  />
                  <path class="st5"
                        d="M120.5,107.7c-1.4,0-2.5-0.5-3.3-1.6c-0.8-1.1-1.2-2.6-1.2-4.6c0-2,0.4-3.5,1.2-4.6c0.8-1.1,1.9-1.6,3.4-1.6 c1.5,0,2.7,0.6,3.5,1.8h0.1c-0.2-0.9-.2-1.7-.2-2.4v-3.8h3.3v16.7h-2.5l-0.6-1.6h-0.1C123.2,107.1,122.1,107.7,120.5,107.7z M121.7,105.1c0.8,0,1.5-0.2,1.8-0.7c0.4-0.5,.6-1.3,.6-2.5v-0.4c0-1.3-0.2-2.2-0.6-2.8c-0.4-0.6-1-0.8-1.9-0.8 c-0.7,0-1.3,0.3-1.7,0.9c-0.4,0.6-0.6,1.5-0.6,2.7c0,1.2,0.2,2.1,0.6,2.7C120.3,104.8,120.9,105.1,121.7,105.1z"
                  />
                  <path class="st5"
                        d="M136.1,107.7c-1.9,0-3.4-0.5-4.5-1.6s-1.6-2.6-1.6-4.5c0-2,0.5-3.6,1.5-4.7c1-1.1,2.4-1.6,4.2-1.6 c1.7,0,3,0.5,4,1.5s1.4,2.3,1.4,4v1.6h-7.7c0,0.9,0.3,1.7,0.8,2.2s1.2,0.8,2.2,0.8c0.7,0,1.4-0.1,2.1-0.2s1.3-0.4,2-0.7v2.5 c-0.6,0.3-1.2,0.5-1.8,.6C137.8,107.6,137,107.7,136.1,107.7z M135.6,97.6c-0.7,0-1.2,0.2-1.6,0.7c-0.4,0.4-0.6,1.1-0.7,1.9h4.6 c0-.8-.2-1.4-.6-1.9C136.9,97.8,136.3,97.6,135.6,97.6z"
                  />
                  <path class="st5" d="M146.9,107.5h-3.3V90.8h3.3V107.5z" />
                  <path class="st5"
                        d="M150.2,92.4c0-1.1,0.6-1.6,1.8-1.6s1.8,0.5,1.8,1.6c0,0.5-0.1,0.9-0.4,1.2c-0.3,0.3-0.7,0.4-1.3,0.4 C150.8,94,150.2,93.4,150.2,92.4z M153.6,107.5h-3.3v-12h3.3V107.5z"
                  />
                  <path class="st5"
                        d="M168.2,107.5h-3.3v-7c0-0.9-0.2-1.5-0.5-2c-0.3-0.4-0.8-0.6-1.5-0.6c-0.9,0-1.6,0.3-2,0.9 c-.4,.6-.6,1.6-.6,3v5.7h-3.3v-12h2.5L160,97h0.2c0.4-0.6,0.9-1,1.5-1.3c0.6-0.3,1.4-0.4,2.2-0.4c1.4,0,2.5,0.4,3.2,1.1 c0.7,0.8,1.1,1.8,1.1,3.3V107.5z"
                  />
                  <path class="st5"
                        d="M177,107.7c-1.9,0-3.4-0.5-4.5-1.6s-1.6-2.6-1.6-4.5c0-2,0.5-3.6,1.5-4.7c1-1.1,2.4-1.6,4.2-1.6
                        c1.7,0,3,0.5,4,1.5s1.4,2.3,1.4,4v1.6h-7.7c0,0.9,0.3,1.7,0.8,2.2s1.2,0.8,2.2,0.8c0.7,0,1.4-0.1,2.1-0.2s1.3-0.4,2-0.7v2.5 c-0.6,0.3-1.2,.5-1.8,.6C178.7,107.6,177.9,107.7,177,107.7z M176.5,97.6c-0.7,0-1.2,0.2-1.6,0.7c-0.4,0.4-0.6,1.1-0.7,1.9h4.6 c0-0.8-0.2-1.4-.6-1.9C177.8,97.8,177.2,97.6,176.5,97.6z"
                  />
                </g>
              </svg>
            </div>
          </div>
        </div>
        <div class="flex flex-col items-center">
          <div class="text-white text-2xl">查询修改流程</div>
          <div class="fctCard" @click="shrinkBack(3)">
            <div class="svg">
              <svg id="svg-faq" width="180" height="180" viewBox="0 0 200 200">
                <g id="svg-faq-g-01">
                  <polygon class="cls-1"
                           points="171.82 110.35 152.7 82 100 99.52 47.3 82 28.18 110.35 90.22 133.41 87.81 138.7 112.19 138.7 109.78 133.41 171.82 110.35"
                  />
                  <path class="cls-2"
                        d="M148.73,84s1.28-.85-7,0L100,99.52,58.28,84c-8.28-.86-7,0-7,0L36.62,110.35c5.42-1,63.38,22.06,63.38,22.06s58-23,63.38-22.06Z"
                  />
                  <path class="cls-3"
                        d="M141.72,84C111.45,78.58,100,99.29,100,99.29h0c-0.65-1-13.27-19.41-41.72-15.29l-14,24.2s36.31-2.71,55.73,19.35c19.43-22.06,55.73-19.35,55.73-19.35Z"
                  />
                </g>
                <g id="svg-faq-g-02">
                  // eslint-disable-next-line vue/max-attributes-per-line, vue/max-attributes-per-line, vue/max-attributes-per-line
                  <text id="svg_11" class="cls-4" font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="40" y="100.66667"
                        x="48" stroke-width="0" stroke="null" fill="#999999"
                  >QMP</text>
                </g>
                <g id="svg-faq-g-03">
                  <text id="svg_10" class="cls-5" font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="40" y="100.66667"
                        x="47" stroke-width="0" stroke="null" fill="#000000"
                  >QMP</text>
                </g>
              </svg>
            </div>
          </div>
        </div>
        <div class="flex flex-col items-center">
          <div class="text-white text-2xl">个人信息</div>
          <div class="fctCard" @click="shrinkBack(4)">
            <div class="svg">
              <svg id="svg-medical-square" width="180" height="180">
                <g id="svg-medical-square-g-01">
                  <polygon class="cls-1"
                           points="60.22 140.82 31.02 90.24 60.22 39.67 118.62 39.67 147.81 90.24 118.62 140.82 60.22 140.82"
                  />
                  <path class="cls-2" d="M116.62,43.14v94.22L35,90.24l81.59-47.11m2-3.46L31,90.24l87.59,50.57V39.67h0Z" />
                  <path class="cls-2"
                        d="M62.22,43.14l81.59,47.11L62.22,137.35V43.14m-2-3.46V140.82l87.59-50.57L60.22,39.67h0Z"
                  />
                  <line class="cls-1" x1="118.62" y1="39.67" x2="61.12" y2="139.28" />
                  <line class="cls-1" x1="60.22" y1="39.67" x2="118.62" y2="140.82" />
                  <line class="cls-1" x1="31.46" y1="90.83" x2="147.81" y2="90.24" />
                  <circle class="cls-3" cx="146.44" cy="90" r="8" />
                  <circle class="cls-4" cx="31.46" cy="90.49" r="8" />
                  <circle class="cls-3" cx="61.12" cy="39.67" r="8" />
                  <circle class="cls-4" cx="118.62" cy="39.67" r="8" />
                  <circle class="cls-4" cx="118.62" cy="140.82" r="8" />
                  <circle class="cls-3" cx="60.22" cy="140.82" r="8" />
                </g>
                <g id="svg-medical-square-g-02">
                  <circle class="cls-5" cx="89.42" cy="90.24" r="28.67" />
                  <path class="cls-6"
                        d="M102.42,98.61L99.51,97v2.48a0.65,0.65,0,0,1,0,.07c2.47,0.38,3.32,3.15,3.37,4.68l-1.4,0c0-.14-0.21-3.46-2.64-3.4s-2.49,3.23-2.48,3.37l-1.4,0c0-1.5.66-4.21,3.19-4.69a0.66,0.66,0,0,1,0-.1V96.3l-4-2.13V91.42a12,12,0,0,0,2.79-4.08,0.71,0.71,0,0,0,.15.08c0.75,0.23,1.75-.84,2.22-2.4s0.25-3-.5-3.23a0.83,0.83,0,0,0-.57.05h0l0,0a5.26,5.26,0,0,0,0-.53c0,0.05,0,.1,0,0.16v0c0-.19,0-0.38,0-0.57,0-6.35-3.71-10.15-8.28-10.15s-8.28,3.8-8.28,10.15c0,0.19,0,.38,0,0.57,0,0,0,0,0,0s0-.1,0-0.15c0,0.17,0,.34,0,0.52l0,0h0a0.83,0.83,0,0,0-.57-0.05c-0.75.23-1,1.68-.5,3.23s1.47,2.63,2.22,2.4A0.71,0.71,0,0,0,83,87.33a12,12,0,0,0,2.79,4.08V94l-1.72,1.08L81,96.78V101a2.1,2.1,0,1,1-1.4,0V97.53l-2,1.08c-3.24,1.8-5.87,3.58-5.87,5.08v2.92a0.92,0.92,0,0,0,.92.92h34.76a0.92,0.92,0,0,0,.92-0.92v-2.92C108.29,102.19,105.66,100.41,102.42,98.61Z"
                  />
                </g>
              </svg>
            </div>
          </div>
        </div>
        <div class="flex flex-col items-center">
          <div class="text-white text-2xl">退出登录</div>
          <div class="fctCard" @click="shrinkBack(5)"
               @mouseover="currentSrc = dynamicGif"
               @mouseout="currentSrc = staticGif"
          >
            <img style="width: 100px;" :src="currentSrc">
          </div>
        </div>
      </div>
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { ref, onMounted, h, reactive } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider,NDataTable,NH2,NButton,NIcon,NInput, NSpace, NModal } from 'naive-ui'
import { nav, setToken } from '../../shared/client/window'
import { actErr, actOK } from '../../shared/client/interact'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'

//图标
const dynamicGif = '../../../public/icons8-sign-out.gif'
const staticGif = '../../../public/static-sign-out.gif'
const currentSrc = ref('../../../public/static-sign-out.gif')

const FunctionTitle = reactive({
  data: ['报到','开启新的项目','新建流程','查询修改流程','个人信息','退出登录'],
  src: ['','/doctor/begin','/doctor/addProcess','/doctor/qmp','/doctor/dDetail','/']
})

function shrinkBack(index: number) {
  if(index == FunctionTitle.src.length - 1) {
    setToken('')
  }
  if(index == 0){
    actOK('报道成功')
    return 
  }
  nav(FunctionTitle.src[index])
}
</script>

<style scoped>
.fctCard {
  width: 150px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  border-radius: 50%;
  height: 150px;
  margin: 3vw;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.3);
}

.fctCard:hover {
  transform: scale(1.0);
  /* 鼠标悬停时放大 1.1 倍 */
  box-shadow: 0px 5px 3px rgba(0, 0, 0, 0.5);
}

.svg g {
    transform-origin: 90px 90px;
    transition: all 0.2s linear;
}
.line {
    clear: both;
    width: 100%;
    height: 4px;
    margin-bottom: 20px;
    background: #CCC4B0;
}
/*Medical Square css begin*/
#svg-medical-square .cls-1 {
    fill: none;
    stroke: #bcbec0;
    stroke-miterlimit: 10;
    stroke-width: 2px;
}
#svg-medical-square .cls-2 {
    fill: #bcbec0;
}
#svg-medical-square .cls-3 {
    fill: #414141;
}
#svg-medical-square .cls-4 {
    fill: #c4c4c4;
}
#svg-medical-square .cls-5 {
    fill: #d42d27;
}
#svg-medical-square .cls-6 {
    fill: #f5f5f5;
}
#svg-medical-square-g-01 {
    transform: rotate(30deg);
}
.svg:hover #svg-medical-square-g-01 {
    transform: rotate(120deg);
}
/*Medical Square css end*/

/*Articles css begin*/
#svg-articles .cls-1 {
    fill: #fbca62;
}
#svg-articles .cls-2 {
    fill: #ededed;
}
#svg-articles .cls-3 {
    fill: #dcdbdb;
}
#svg-articles .cls-4 {
    fill: #414141;
}
#svg-articles .cls-5 {
    fill: #d1d3d4;
}
#svg-articles .cls-6 {
    fill: #fff;
}
#svg-articles .cls-7 {
    fill: #f36e41;
}
#svg-articles .cls-8 {
    fill: #e6e5e5;
}
#svg-articles .cls-10,
#svg-articles .cls-9 {
    fill: none;
    stroke-miterlimit: 10;
}
#svg-articles .cls-9 {
    stroke: #a7a9ac;
}
#svg-articles .cls-10 {
    stroke: #9cceee;
}
#svg-articles .cls-11 {
    fill: #5eb8e8;
}
#svg-articles-g-02 {
    transform: translateY(33px);
}
.svg:hover #svg-articles-g-02 {
    transform: translateY(-33px);
}
/*Articles css end*/

/*Corporate Site css begin*/
#svg-corporate-site .cls-1 {
    fill: #dcdbdb;
}
#svg-corporate-site .cls-2 {
    fill: #9cceee;
}
#svg-corporate-site .cls-3,
#svg-corporate-site .cls-4 {
    fill: none;
    stroke-miterlimit: 10;
    stroke-width: 4px;
}
#svg-corporate-site .cls-3 {
    stroke: #9cceee;
}
#svg-corporate-site .cls-4 {
    stroke: #f26a50;
}
#svg-corporate-site-g-01 {
    transform: translate(0, 0) rotate(0) scale(1);
}
#svg-corporate-site-g-02 {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
}
#svg-corporate-site-g-03 {
    transform: translate(0, 0) rotate(0);
    opacity: 0;
}
.svg:hover #svg-corporate-site-g-01 {
    transform: translate(-5px, 20px) rotate(-30deg) scale(0.8);
}
.svg:hover #svg-corporate-site-g-02 {
    transform: translate(-5px, 15px) rotate(-20deg);
    opacity: 0;
}
.svg:hover #svg-corporate-site-g-03 {
    transform: translate(-5px, 15px) rotate(-20deg);
    opacity: 1;
}
/*Corporate Site css end*/

/*Digital Tool css bgin*/
#svg-digital-tool .cls-1 {
    fill: #ffd99c;
}
#svg-digital-tool .cls-2 {
    fill: #555;
}
#svg-digital-tool .cls-3 {
    fill: #414141;
}
#svg-digital-tool .cls-4 {
    fill: #5eb8e8;
}
#svg-digital-tool .cls-5 {
    fill: #fff;
}
#svg-digital-tool-g-01 .cls-4 {
    fill: #F66D43;
    transition: all 0.2s linear;
}
#svg-digital-tool-g-02 {
    opacity: 1;
}
#svg-digital-tool-g-03 {
    opacity: 0;
}
#svg-digital-tool-g-04 {
    transform: translate(0, 0) rotate(0);
}
.svg:hover #svg-digital-tool-g-01 .cls-4 {
    fill: #5eb8e8;
}
.svg:hover #svg-digital-tool-g-02 {
    opacity: 0;
}
.svg:hover #svg-digital-tool-g-03 {
    opacity: 1;
}
.svg:hover #svg-digital-tool-g-04 {
    transform: translate(-8px, 15px) rotate(-30deg);
}
/*Digital Tool css end*/

/*Guideline css begin*/
#svg-guideline .st0 {
    fill: none;
    stroke: #F26A50;
    stroke-width: 8;
    stroke-miterlimit: 10;
}
#svg-guideline .st1 {
    fill: none;
    stroke: #C4C4C3;
    stroke-width: 4;
    stroke-miterlimit: 10;
}
#svg-guideline .st2 {
    fill: #9CCEEE;
}
#svg-guideline .st3 {
    fill: #BDB4AE;
}
#svg-guideline .st4 {
    fill: #213646;
}
#svg-guideline .st5 {
    fill: #263F6A;
}
#svg-guideline-g-01 {
    transform: scale(0.5) translateX(-60px);
}
#svg-guideline-g-02 {
    opacity: 1;
}
.svg:hover #svg-guideline-g-01 {
    transform: scale(1) translateX(0);
}
.svg:hover #svg-guideline-g-02 {
    opacity: 0;
}
/*Guideline css end*/

/*Product Information css begin*/
#svg-product-information .cls-1 {
    fill: #f26a50;
}
#svg-product-information .cls-2 {
    fill: #c4c4c4;
}
#svg-product-information .cls-3 {
    fill: #9cceee;
}
#svg-product-information .cls-4 {
    fill: #7d605b;
}
#svg-product-information .cls-5 {
    fill: #fff;
}
#svg-product-information .cls-6 {
    fill: #d42d27;
    transition: all 0.2s linear;
}
#svg-product-information-g-01 {
    transform: translateY(0) scale(1);
}
#svg-product-information-g-02 {
    transform: translateY(-5px) scale(0.8);
}
#svg-product-information-g-02 .cls-6 {
    fill: #653E2D;
}
.svg:hover #svg-product-information-g-01 {
    transform: translateY(10px) scale(0.9);
}
.svg:hover #svg-product-information-g-02 {
    transform: translateY(0) scale(1);
}
.svg:hover #svg-product-information-g-02 .cls-6 {
    fill: #d42d27;
}
/*Product Information css end*/

/*FAQ css begin*/
#svg-faq .cls-1 {
    fill: #263f6a;
}
#svg-faq .cls-2 {
    fill: #cccbca;
}
#svg-faq .cls-3 {
    fill: #fff;
    stroke: #c4c4c3;
    stroke-miterlimit: 10;
    stroke-width: 2px;
}
#svg-faq .cls-4 {
    fill: #7d605b;
}
#svg-faq .cls-5 {
    fill: #f26a50;
}
#svg-faq-g-01 {
    transform: scale(1) translateY(0);
}
#svg-faq-g-02 {
    transform: scale(1) translateX(-5px);
}
#svg-faq-g-03 {
    transform: scale(1);
}
.svg:hover #svg-faq-g-01 {
    transform: scale(0.8) translateY(30px);
}
.svg:hover #svg-faq-g-02 {
    transform: scale(1.3) translateX(3px);
}
.svg:hover #svg-faq-g-03 {
    transform: scale(1.3);
}
/*FAQ css end*/

/* 滚动条 */
/* 针对 Webkit 内核浏览器 */
::-webkit-scrollbar {
  width: 12px;  /* 设置滚动条的宽度 */
  height: 12px; /* 设置滚动条的高度 */
}

</style>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
